import React, {memo, useEffect,useState} from 'react';
import {shallowEqual, useDispatch, useSelector} from 'react-redux'
import { getUserMessageAction } from '../../store/usersStore/userCreators';
import { Table, Tag, Space, Divider, Button, Modal, message,Spin } from 'antd';

import { deleteUserRequest } from '../../services/Admin';

export default memo(function UserManage() {
    const {userMessage} = useSelector(state => ({
        userMessage: state.getIn(["users","userMessage"])
    }), shallowEqual)

    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getUserMessageAction());
        // console.log(userMessage);
    }, [dispatch, userMessage])


    //相关自定义状态
    const [isVisable, setIsVisable] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [currentDeleteUser, setCurrentDeleteUser] = useState({});
    const [isReload, setIsReload ] = useState(false);

    useEffect(() => {

    },[isReload])

    //删除用户的回调
    const deleteUser = (text, record) => {
      console.log('deleteuser');
      setIsVisable(true);
      setCurrentDeleteUser(text);
    }

    //弹窗确认
    const onOk = () => {
      console.log('ok');
      setIsLoading(true);

      //发送网络请求
      deleteUserRequest(currentDeleteUser.uid).then(res => {
        setIsLoading(false);
        setIsVisable(false);
        console.log(res);

        if(res.code === 200)
        {
          message.success("用户删除成功!");
          setIsReload(true);

        }
        else
        {
          message.error("用户删除失败！");
        }
      }).catch(err => {
        setIsLoading(false);
        setIsVisable(false);
        message.error("用户删除失败")
      })
    }


    //弹窗取消
    const onCancel = () => {
      console.log('cancel');
      setIsVisable(false);
    }

    const columns = [
        {
          title: '用户ID',
          dataIndex: 'uid',
          key: 'uid',
          render: text => <a href={'##'}>{text}</a>
            ,
        },
        {
            title: '用户昵称',
            dataIndex: 'username',
            key: 'username',
          },
        {
          title: '注册时间',
          dataIndex: 'registration_data',
          key: 'registration_data',
        },
        {
          title: "角色",
          dataIndex: "role",
          key: "role",
          render: role => {
              let roleName = "抑者";
              let color = 'blue';
              if(role === '001')
              {
                  roleName = "愈者";
                  color = 'green'
              }
              return (
                  <>
                    <Tag color={color} key={role}>
                        {roleName}
                    </Tag>
                  </>
              )
          }
        },
        {
          title: '操作',
          key: 'action',
          render: (text, record) => (
            <Space size="middle">
              <Button type="link" onClick={e => deleteUser(text,record)}>删除</Button>
            </Space>
          ),
        },
      ];


    return (
        <div>
            <Divider orientation="left">用户管理页</Divider>
            <div>
                <Table columns={columns} dataSource={userMessage} style={{minHeigh:"100%"}}/>
            </div>
            <Modal
              title="提示框"
              visible={isVisable}
              onOk={onOk}
              onCancel={onCancel}
              cancelText="取消"
              okText="确定"
            >
              <p>是否确认删除该用户？</p>
              <Spin spinning={isLoading}/>
            </Modal>
        </div>
    )
})